<template>
  <div>
    <a-card :bordered="false" style="margin-bottom:24px;">
      <a-form-model ref="form" :model="formData" layout="inline">
        <a-form-model-item label="验证账号">
              <a-tooltip
                    placement="top"
                    title="指不再对劝阻账号进行验证时，可关闭验证功能"
                    style="margin-right:10px;"
                >
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.verifyAccount" @change="onChangeSwitch">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
      </a-form-model>
    </a-card>
    <div class="main-content">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="用户名">
                <a-input placeholder="请输入用户名" v-model="queryParam.realName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      </div>

      <!-- table区域-begin -->
      <div style="margin-top:10px;">
        <a-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange">
            
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
        </a-table>
      </div>

      <add-modal ref="modalForm" @ok="modalFormOk"></add-modal>
    </div>
  </div>
</template>

<script>
  import {publicApi,verifySwitch,verifyAccountStatus} from '@/api/warning/Policy.js'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import AddModal from './components/VerifyManageAddModal.vue'
  export default {
    components: {
      AddModal
    },
    mixins:[JeecgListMixin],
    data () {
      return {
        formData:{
          verifyAccount:undefined,
        },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            // width: 100,
            // align: 'center',
            customRender: (text, record, index) =>
              `${(this.ipagination.current - 1) * this.ipagination.pageSize +
                (index + 1)}` //序号分页后连续
          },
          {
            title: "用户名",
            dataIndex: "realName",
          },
          {
            title:'验证手机号',
            // align:"center",
            dataIndex: 'verifyPhone',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            // width:200,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: publicApi.verifyManageList,//"/sys/tenant/list",
          delete: publicApi.verifyManageDelete,//"/sys/tenant/delete",
        },
      }
    },
    created(){
      this.getVerfyAccountStatus()
    },
    methods: {
      onChangeSwitch(e){
        let params = {
          status:this.formData.verifyAccount
        }
        verifySwitch(params).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          }else{
            this.$message.warning(res.message?res.message:'请求失败！')  
          }
        }).catch(e=>{
          this.$message.warning("请求失败！");
        })
      },
      getVerfyAccountStatus(){
        verifyAccountStatus().then((res) => {
          if (res.success) {
            this.formData.verifyAccount = res.result?res.result.status:'0'
          }else{
            this.formData.verifyAccount='0'
            console.log("请求验证账号状态失败");
          }
        }).catch(e=>{
          this.formData.verifyAccount='0'
          this.$message.warning("请求验证账号状态失败！");
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .main-content{
    background: #fff;
    padding: 24px;
  }
</style>